<template>
    <div style="padding-top: 1px">
        <div class="song-list-album">
            <div class="album-slide">
                <div class="album-img">
                    <img :src="attachImageUrl(tempList.pic)"/>
                </div>
                <div class="album-info">
                    <h2>简介：</h2>
                    <span>
                    {{tempList.introduction}}
                </span>
                </div>
            </div>
        </div>
        <div class="album-content">
            <div class="album-title">
                <p>{{tempList.title}}</p>
            </div>
            <div class="album-score">
                <div>
                    <h3>歌单评分</h3>
                    <div>
                        <el-rate v-model="average" disabled></el-rate>
                    </div>
                </div>
                <span>{{average * 2}}</span>
                <div>
                    <h3>评价</h3>
                    <div v-if="rankByConsumer < 0" @click="setRank">
                        <el-rate v-model="rank" allow-half show-text></el-rate>
                    </div>
                    <div v-else>
                        <el-rate v-model="rankByConsumer" allow-half show-text disabled></el-rate>
                    </div>
                </div>
            </div>
            <div class="songs-body">
                <album-content :songList="listOfSongs">
                    <template slot="title">歌单</template>
                </album-content>
                <!-- 评论 -->
                <comment :play-id="songListsId" :type="1"/>
            </div>
        </div>
    </div>
</template>

<script>
import {mixin} from "@/mixins";
import {mapGetters} from 'vuex'
import {listSongDetail, songOfSongId, setRank, getRankOfSongListId, getRankByConsumer} from '../api/index'
import AlbumContent from "@/components/AlbumContent";
import Comment from "@/components/Comment";
export default {
    name: "SongListAlbum",
    mixins: [mixin],
    components:{
        Comment,
        AlbumContent
    },
    data(){
        return{
            songLists: [],      //当前页面需要展示的歌曲列表
            songListsId: '',    //前面传来的歌单id
            consumerId: '',     //用户id
            average: 0,         //平均分
            rank: 0,            //提交评价的分数
            rankByConsumer: -1, //当前用户当前歌单的评分
        }
    },
    computed:{
        ...mapGetters([
            'listOfSongs',      //当前播放的列表
            'tempList',         //当前的歌单对象
            'loginIn',          //用户是否已登录
            'userId',           //当前登录用户id
        ])
    },
    created(){
        this.songListsId = this.$route.params.id;
        this.consumerId = this.userId;
        this.getSongId();
        this.getRank(this.songListsId);
        this.getRankByConsumer(this.consumerId,this.songListsId);
    },
    methods:{
        //获取当前歌单的歌曲列表
        getSongId(){
            listSongDetail(this.songListsId)
                .then(res => {
                    for(let item of res){
                        this.getSongList(item.songId);
                    }
                    this.$store.commit('setListOfSongs', this.songLists);
                }).catch(err => {
                console.log(err);
            });
        },
        //根据歌曲id获取歌曲信息
        getSongList(id){
            songOfSongId(id)
                .then(res => {
                    this.songLists.push(res);
                }).catch(err => {
                    console.log(err);
            });
        },
        //获取歌单评分
        getRank(id){
            getRankOfSongListId(id)
                .then(res => {
                    this.average = res / 2;
                })
        },
        //提交评分
        setRank(){
            if(this.loginIn){
                let params = new URLSearchParams();
                params.append('songListId', this.songListsId);
                params.append('consumerId', this.userId);
                params.append('score', this.rank * 2);
                setRank(params)
                    .then(res => {
                        if(res.code == 1){
                            this.notify('评分成功', 'success');
                            this.getRank(this.songListsId);
                            this.rankByConsumer = this.rank;
                        }else{
                            this.notify('评分失败', 'error');
                        }
                    }).catch(err => {
                        this.notify('评分失败', 'error');
                        console.log(err);
                })
            }else{
                this.rank = null;
                this.notify('请先登录', 'warning');
            }
        },
        //获取当前用户当前歌单评分
        getRankByConsumer(userId, songListId){
            if(userId == null){
                return;
            }else{
                let _this = this;
                let params = new URLSearchParams();
                params.append('consumerId', userId);
                params.append('songListId', songListId);
                getRankByConsumer(params)
                    .then(res => {
                        _this.rankByConsumer = res / 2;
                        console.log("结果：" + res);
                    }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/song-list-album";
</style>